<template>
    <view class="picker-area" >
		<view class="mask" @click="close"></view>
		<view class="content">
			<view class="tabbar">
				<view class="tab">
					<view class="item" :class="{'select' : count === index}" v-for="(item, index) in selectAddress" :key="index" @click="change_tab(index)">
						{{ item }}
					</view> 
				</view>
				<view class="sure" @click="sure">确定</view>
			</view>
			<scroll-view class="list" scroll-y="true" :scroll-into-view="name" scroll-with-animation>
				<view class="item" :id='`cell${index}`' :class="{'red' : selectIndex[count] === index}" v-for="(item, index) in area" :key="index" @click="select(item, index)">
					{{ item }}
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
export default {
	props: {
	},
    components: {},
    data() {
        return {
			count: 0,						// 当前索引
			area: [],						// 当前索引的地区数组
			selectAddress: ['请选择'],		// 每次选择的地名
			selectIndex: [],				// 每次选择的索引
			nameList: [],					// 每次选择的id名
			name: ''						,// 当前tab下选中的名
			address: "",
		};
    },
	watch: {
	},
    computed: {
		data() {
			let data = this.$store.state.address.data;
			for(let key in data) {
				this[key] = data[key]
			}
			this.name = this.nameList[0];
		},
	},
    methods: {
		change_tab(index) {
			this.$store.dispatch('address/get_data',{
				count: index,
			})
			if(this.nameList) {
				setTimeout(() => {
					this.name = this.nameList[index]
					// 清除id名，否则名字一样就无法跳转
					setTimeout(() => {
						this.name = ''
					})
				})
			}
		},
		close() {
			this.$store.dispatch('address/get_data',{
				show: false,
			})
			let data = this.$store.state.user.data
		},
		// 确定按钮
		sure() {
			let { selectAddress, nameList, selectIndex } = this;
			if(selectAddress.length !== 4) {
				return ;
			}
			let flag = true
			selectAddress.map(item => {
				if(item === '请选择'){
					flag = false
				}
			})
			if(flag) {
				this.name = this.nameList[0];
				this.address = selectAddress.join('')
				this.$emit('getAddress',this.address)
				this.$store.dispatch("address/get_info", {
					address: selectAddress.join('')
				})
				
				this.$store.dispatch('address/get_data', {
					show: false,
					nameList: nameList,
					selectIndex: selectIndex
				})
			}
		},
		select(item, index) {
			let { nameList, selectAddress, selectIndex } = this
			let count = this.count
			let idName = `cell${index}`
			let length = selectAddress.length;
			nameList.splice(count, 1, idName)
			selectIndex.splice(count, length-count, index)
			selectAddress.splice(count, length-count, item)
			if(count < 3) {
				count++;
				this.$store.dispatch('address/get_data', {
					count: count,
				})
				selectAddress.splice(count, 1, '请选择')
			}
		}
	},
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {
		
	},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
};
</script>
<style scoped lang='scss'>
@import "./index.scss";
</style>